<template>
  <div class="make-info-details-container">
    <div class='blue-line'>{{ $t('other.makeMsg') }}</div>
    <div class="base-info">
      <p>{{$t('hangManage.makeNo')}}: <span>{{ scheduleInfo.moNo }}</span></p>
      <p>{{$t('basicData.styleNo')}}: <span>{{ scheduleInfo.styleNo }}</span></p>
      <p>{{$t('basicData.productType')}}: <span>{{ scheduleInfo.productType }}</span></p>
      <p>{{ $t('other.totalPackagesNumber') }}: <span>{{ scheduleInfo.quantity }}</span></p>
      <p>{{ $t('other.processLine') }}: <span>{{ scheduleInfo.lineNo }}</span></p>
      <p>{{ $t('other.selectNumber') }}: <span>{{(personList||[]).length}} / {{(stationList||[]).length}} </span></p>
      <p>{{$t('common.createTime')}}: <span>{{ formatTime(scheduleInfo.createTime, 'YYYY-MM-DD HH:mm:ss') }}</span></p>
    </div>
    <a-row class="mb-8">
      <a-col :span="12">{{ $t('other.prodSite') }}：</a-col>
      <a-col :span="12" class="text-primary text-right ">
        <span class=" hover-pointer" @click="checkAll('station',stationList)">
          {{$t('layout.lookAll')}}
          <RightOutlined />
        </span>
      </a-col>
    </a-row>
    <div class="bg-gray">
      <div class="line-4">
        <span v-for="(item) in stationList" :key="item">{{ item.title + ',' }}</span>
      </div>
    </div>
    <a-row class="mb-8">
      <a-col :span="12">{{ $t('other.pordUser') }}：</a-col>
      <a-col :span="12" class="text-primary text-right hover-pointer">
        <span class=" hover-pointer" @click="checkAll('person',personList)">
          {{$t('layout.lookAll')}}
          <RightOutlined />
        </span>
      </a-col>
    </a-row>
    <div class="bg-gray">
      <div class="line-4">
        <span v-for="(item) in personList" :key="item">{{ '【'+item.title + '】,' }}</span>
      </div>
    </div>
    <div class="mb-8">{{ $t('other.annex') }}:</div>
    <div class="bg-gray" v-if="!isEmpty(scheduleInfo.fileListName)">
      <a-upload v-model:file-list="scheduleInfo.fileListName" disabled></a-upload>
    </div>
    <div class="mb-8">{{ $t('common.remark') }}:</div>
    <div class="bg-gray wrap " v-if="!isEmpty(scheduleInfo.remark)">{{ scheduleInfo.remark }}</div>

    <CheckAllModal ref="checkAllModalRef" />
  </div>

</template>
<script setup>
import CheckAllModal from './checkAllModal'
import { formatTime } from '@/utils'
import { RightOutlined } from '@ant-design/icons-vue'
import {isEmpty} from 'lodash';

let checkAllModalRef = ref()
const checkAll = (type,list) => {
  checkAllModalRef.value.open(type,list)
}

import { cloneDeep } from 'lodash'
import { ref, watch } from 'vue'

let scheduleInfo = ref({})
let stationList = ref([])
let personList = ref([])

const props = defineProps({
  scheduleInfo: { type: Object, default: () => {} },
  stationList: { type: Array, default: () => [] },
  personList: { type: Array, default: () => [] }
})
watch(
    () => props.scheduleInfo,
    (newVal) => {
      scheduleInfo.value = cloneDeep(newVal)
    },
    { deep: true, immediate: true }
)
watch(
    () => props.stationList,
    (newVal) => {
      stationList.value = cloneDeep(newVal)
    },
    { deep: true, immediate: true }
)
watch(
    () => props.personList,
    (newVal) => {
      personList.value = cloneDeep(newVal)
    },
    { deep: true, immediate: true }
)
defineExpose({
  scheduleInfo,
  stationList,
  personList,
})
</script>